<template>
  <div >
    <el-form ref="form" :rules="rules" :model="form" label-width="130px" class="layout-all form-width">
      <el-form-item label="标题:" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入标题"
        />
      </el-form-item>

      <el-form-item label="标题图标:" prop="thumb">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100"/>
      </el-form-item>
      <el-form-item label="标题颜色" prop="textColor">
        <el-color-picker v-model="form.textColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="边框颜色" prop="frameColor">
        <el-color-picker v-model="form.frameColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="背景颜色" prop="backgroundColor">
        <el-color-picker v-model="form.backgroundColor"></el-color-picker>
      </el-form-item>
      <el-form-item label="是否启用:" prop="status">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-close" circle @click="bk()" />
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="onSubmit('form')"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  // components: { richText },
  data() {
    return {
      upload_thumburl: "",
       thumb:"",
      id:0,
      form: {
        id: 0,
        title: "",
        thumb:"",
        textColor:'',
        backgroundColor:'',
        frameColor:'',
        status:true
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        // thumb: [{ required: true, message: "请上传图标", trigger: "blur" }],
        // textColor: [{ required: true, message: "请选择标题颜色", trigger: "blur" }],
        // backgroundColor: [{ required: true, message: "请选择背景颜色", trigger: "blur" }],
        // frameColor: [{ required: true, message: "请选择边框颜色", trigger: "blur" }],

      },
    };
  },
 
  methods: {
    init (id) {
      if (id) {
        this.id = id;
      }
      this.init_into();
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      console.log(form);

      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          this.get("/admin/UserCenterCat/save", form, "POST").then((e) => {
            this.$msg_ok("success", "操作成功");
            this.$emit('closeGroupForm')
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$emit('closeGroupForm',1)
    },

    // 获取当前数据
    init_into() {
    this.get("/admin/UserCenterCat/info", {'id':this.id}, "POST").then((e) => {
        if(this.id>0){
          this.form = e.info.tpl;
          this.form.status = this.form.status== 1
        }
    });
    },
  },
};
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
.avatar {
  width:100%;
  height:100%;
}

</style>
